<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-table-ctx-wrap">
				<!-- 控制器 -->
				<div class="actions-box">
					<div class="control-box">
						<div class="control-left">
							<div class="control-item">
								<el-button type="primary" @click="doAdd()">
									添加商品库存
								</el-button>
							</div>
						</div>
						<div class="control-right">
							<div class="action-item">
								<el-cascader v-model="cascader_cate" :options="filter_cates" :props="{ 
									checkStrictly: true,
									children: 'child',
									value: 'id',
									label: 'title',
									 }" clearable placeholder="分类筛选"></el-cascader>
							</div>

							<!-- 		<div class="action-item">
								<el-cascader v-model="cascader_brand_cate" :options="filter_brand_cates" :props="{ 
									checkStrictly: true,
									children: 'child',
									value: 'id',
									label: 'title',
									 }" clearable placeholder="品牌筛选"></el-cascader>
							</div> -->


							<div class="action-item">
								<el-input v-model="searchParams.keyword" clearable placeholder="请输入关键词">
									<el-button slot="append" size="small" icon="el-icon-search" @click="doSearch()">
									</el-button>
								</el-input>
							</div>


							<div class="action-item">
								<el-button type="primary" @click="do_export_all()">
									导出
								</el-button>
							</div>
						</div>
					</div>
				</div>
				<!-- 控制器 -->

				<!-- 渲染表格 -->
				<div class="table-view">
					<w_table ref="w_table" @emitTable="emitTable" />
				</div>
				<!-- 渲染表格 -->
				<div class="table-util">
					<div class="util-left">
						<!-- 批量选择 -->
					</div>
					<div class="util-right">
						<div class="pagi-item">
							<w_pagination v-if="tableData.length" :total="total" :pagination="pagination" @size-change="onSizeChange"
								@current-change="onCurrentChange" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<w_form_modal ref="w_form_modal" @confirm="confirmFormSubmit" />

		<stock_form_modal ref="stock_form_modal" @confirm="confirmFormSubmit" data-title="商品出入库" />
	</div>
</template>


<script>
	import stock_form_modal from '@/components/product/stock/stock_form_modal.vue'


	import page_config from "@/constant/stock/stock-list.js";
	import page_mixin from "@/mixins/page_mixin.js";
	export default {
		name: "stock-list",
		mixins: [page_mixin],
		components: {
			stock_form_modal
		},
		data() {
			return {
				page_config,


				searchParams: {
					keyword: '',
					channelId: '',
					brandId: '',
					page: 1,
					pageNum: 10,
				},

				filter_cates: [],
				cascader_cate: '',

				// filter_brand_cates: [],
				// cascader_brand_cate: '',
			};
		},
		computed: {

		},
		watch: {
			cascader_cate(value) {
				this.$log('watch 分类', value)
				this.searchParams.channelId = value[value.length - 1]

				this.initQuery()
			},
			cascader_brand_cate(value) {
				this.$log('watch 分类', value)
				this.searchParams.brandId = value[value.length - 1]

				this.initQuery()
			},
		},
		created() {
			this.query_filters()
		},
		mounted() {

		},
		methods: {
			query_filters() {
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "product_getProductChannelList",
					}
				}).then(res => {
					if (res.code == 200) {
						this.filter_cates = res.data.list;
					}
				})
				// this.$api({
				// 	url: '/admin_service.php',
				// 	method: 'get',
				// 	data: {
				// 		action: "product_getProductBrandList",
				// 	}
				// }).then(res => {
				// 	if (res.code == 200) {
				// 		this.filter_brand_cates = res.data.list;
				// 	}
				// })
			},


			doAdd() {
				this.$refs.stock_form_modal.init()
			},
			// doRowEdit(row) {
			// 	this.$refs.stock_form_modal.init(row)
			// },
			
			
			do_export_all() {
				//https://www.yogo138.com/admin_service.php?action=kucun_exportForm&keyword=&channelId=&brandId=&page=1&pageNum=10&token=3c693568381f7849297c102fa63dc7ec
				let token = this.mix_get_token()
				let url =
					`${this.API_ROOT}?action=kucun_exportForm&page=1&pageNum=1000000&&keyword=&token=${token}`
				window.open(url, '_blank')
			},
			
			do_export_filter() {
				let token = this.mix_get_token()
				let startTime = this.time_range[0] || ''
				let endTime = this.time_range[1] || ''
				
				let url =
					`${this.API_ROOT}?action=kucun_exportForm&page=1&pageNum=1000000&orderStatus=${this.tabSelect.value}&keyword=${this.keyword}&startTime=${startTime}&endTime=${endTime}&token=${token}`
				window.open(url, '_blank')
			},
			
			
			
		},
	};
</script>

<style scoped lang="less">
	// /deep/ .el-table table {
	//   width: 100% !important;

	//   thead {
	//     th.el-table__cell {
	//       background: #f8f8f8;
	//       color: #000;
	//     }
	//   }
	// }


	.page-table-ctx-wrap {
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	// 新增
	.control-box {
		.flex-between();

		.control-left {
			.flex();

			.control-item {
				margin-right: 10px;
			}
		}

		.control-right {
			.flex();

			.action-item {
				margin-left: 10px;
			}
		}
	}

	.table-view {
		margin-top: 20px;
		margin-bottom: 20px;
	}


	// 表格工具栏
	.table-util {
		.flex-between();

		.util-left {
			.flex();
			min-width: 100px;

			.util-items {
				.flex();

				.item {
					margin-right: 10px;
				}
			}
		}

		.util-right {}
	}
</style>